<template>
  <div>
    <div v-for="(item, index) in activeitem" :key="index">
      <!-- 第一层 -->
      <div
        v-if="item.childList && item.childList.length > 0"
        class="mulu_list"
        :style="
          item.type === 1 ? 'margin-bottom: 30rpx;' : 'margin-bottom: 0rpx;'
        "
      >
        <div v-for="n in depth" :key="n" :style="'width: 10px; height: 20px'" />
        <el-collapse>
          <div
            style="
              position: absolute;
              top: 14px;
              z-index: 9999999;
              cursor: pointer;
            "
            @click="handleClickCollapse(item)"
          >
            {{ item.name }}
          </div>
          <el-collapse-item style="position: relative">
            <recursive-collapse
              :activeitem="item.childList"
              :depth="depth + 1"
              @check-url="handleClickCollapse(item)"
              @reset-parent-icons="resetParentIcons(item)"
            />
          </el-collapse-item>
        </el-collapse>
      </div>
      <div
        v-else
        class="mulu_list"
        :style="
          item.type === 2 ? 'margin-bottom: 30rpx;' : 'margin-bottom: 0rpx;'
        "
      >
        <div
          v-for="n in depth"
          :key="n"
          :style="'width: 10px; height: 20px;'"
        />
        <div class="video_box" @click="handleClickCollapse(item)">
          <img class="img_box" src="https://jzchildcare.oss-cn-hangzhou.aliyuncs.com/teach/file/common/2025-02-24/fee83df18a544278a6c868a1024351f5_1740363249778.png" alt="">
          <!-- <img class="img_box" :src="getIconSrc(item)" alt="" /> -->
          <div style="color: #999999">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecursiveCollapse',
  props: {
    activeitem: {
      type: Array,
      default () {
        return []
      }
    },
    depth: {
      type: Number,
      default () {
        return 1
      }
    }
  },
  data () {
    return {
      currentActiveItem: null // 当前选中的视频项
    }
  },
  watch: {
    activeitem: {
      handler (newVal, oldVal) {
        console.log('activeitem changed:', newVal)
        this.activeitem = newVal
      },
      deep: true, // 深度监听
      immediate: true // 立即触发一次监听回调
    }
  },
  created () {
    this.resetAllIcons()
    // console.log(this.activeitem, "activeitem");
    // this.activeitem.forEach((item) => {
    //   item.clickImg =
    //     "https://jzchildcare.oss-cn-hangzhou.aliyuncs.com/teach/file/common/2025-02-24/fee83df18a544278a6c868a1024351f5_1740363265185.png";
    // });
  },
  methods: {
    // 获取当前项的图标
    getIconSrc (item) {
      if (this.currentActiveItem === item) {
        // 当前选中的视频项，使用“播放中”图标
        return 'https://jzchildcare.oss-cn-hangzhou.aliyuncs.com/teach/file/common/2025-02-24/fee83df18a544278a6c868a1024351f5_1740363249778.png'
      }
      // 其他视频项，使用默认图标
      return item.clickImg
    },
    // 重置所有图标的 clickImg 属性为默认值
    resetAllIcons () {
      const defaultIcon =
        'https://jzchildcare.oss-cn-hangzhou.aliyuncs.com/teach/file/common/2025-02-24/fee83df18a544278a6c868a1024351f5_1740363265185.png'
      this.updateClickImg(this.activeitem, defaultIcon)
    },
    // 递归更新 clickImg 属性
    updateClickImg (array, iconSrc) {
      for (const item of array) {
        // 使用 Vue.set 确保响应式更新
        this.$set(item, 'clickImg', iconSrc)
        // 如果有 children，则递归处理
        if (item.childList && item.childList.length > 0) {
          this.updateClickImg(item.childList, iconSrc)
        }
      }
    },
    handleClickCollapse (item) {
      this.resetAllIcons() // 点击时先重置所有图标
      this.$emit('reset-parent-icons')
      if (this.currentActiveItem === item) {
        // 如果当前点击的是同一个视频项，则取消选中
        // this.currentActiveItem = null;
      } else {
        // 否则，设置当前选中的视频项
        this.currentActiveItem = item
      }
      // 触发父组件事件，传递视频地址
      this.$emit('check-url', item.videoAddress)
    },
    // 接收父组件的通知，重置当前组件的图标
    resetParentIcons () {
      this.resetAllIcons()
      this.currentActiveItem = null // 清空当前选中项
      console.log(this.activeitem, 'activeitem')
    }
  }
}
</script>
<style scoped lang="scss">
.mulu_list {
  display: flex;
  align-items: center;
}
.video_box {
  display: flex;
  align-items: center;
  padding: 10px 0px;
  margin-left: -10px;
  cursor: pointer;
}
::v-deep .el-collapse {
  // display: flex;
  // flex-wrap: wrap;
  // border: none;
  width: 100%;
  position: relative;
}
// ::v-deep .el-collapse-item__content {
//   padding-bottom: 0px;
// }
// ::v-deep .el-collapse-item__header {
//   padding-left: 40px !important;
// }
</style>
